import { State } from './interfaces/redux'

import React, { useCallback, useState } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { APP_CXT } from './contexts'
// import Counter from './components/Counter'
import Counter from './components/Counter2'
import { increase, decrease } from './models/action'
import { Dispatch } from 'redux'

function APP({ n, increase, decrease }: any) {
  return (
    <>
      <div>hello</div>
      <Counter />
      {/* <APP_CXT.Provider value={{n}}>
        <Counter/>
      </APP_CXT.Provider> */}
      <button onClick={() => increase(1)}>+ 1</button>
      <button onClick={() => decrease(1)}>- 1</button>
    </>
  )
}

const mapStateToProps = (state: State) => ({
  n: state.n,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
  bindActionCreators({ increase, decrease }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(APP)
